<template>
  <div class="container">
    <div class="tags-container">
      <el-card>
        <!-- 面包屑导航  -->
        <div slot="header" v-if="paramsId">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{
              $route.params.subjectName
            }}</el-breadcrumb-item>
            <el-breadcrumb-item>标签管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <el-row>
          <!-- 搜索 -->
          <el-col :span="18">
            <el-form
              :model="queryinfo"
              ref="tagForm"
              label-width="100px"
              class="demo-ruleForm"
              :inline="true"
            >
              <el-form-item label="标签名称" prop="tagName">
                <el-input v-model="queryinfo.tagName"></el-input>
              </el-form-item>
              <el-form-item label="状态" prop="state">
                <el-select v-model="queryinfo.state" placeholder="请选择">
                  <el-option
                    v-for="item in status"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button class="clear" @click="clear">清除</el-button>
                <el-button type="primary" @click="search">搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="6">
            <el-button
              type="text"
              icon="el-icon-back"
              class="back"
              @click="$router.back()"
              v-if="paramsId"
              >返回学科</el-button
            >
            <el-button type="success" class="right" @click="handleChange('add')"
              >新增标签</el-button
            >
          </el-col>
        </el-row>

        <el-row>
          <el-alert type="info" show-icon :closable="false">
            <span slot="title">数据一共 {{ counts }} 条</span>
          </el-alert>
        </el-row>

        <!-- 数据 -->
        <el-table :data="tagslist" style="width: 100%">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="subjectName" label="所属学科" width="180">
          </el-table-column>
          <el-table-column prop="tagName" label="标签名称" width="180">
          </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column label="创建日期">
            <template slot-scope="scope">
              <span>{{ scope.row.addDate | parseTimeByString }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.state === 1">已启用</span>
              <span v-else>已禁用</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!-- <el-button type="text" @click="handleStatus(scope.row)">
                <span v-if="scope.row.state == 0">启用</span>
                <span v-else>禁用</span>
              </el-button> -->
              <el-button type="text" @click="handleStatus(scope.row)">{{
                scope.row.state === 1 ? '禁用' : '启用'
              }}</el-button>
              <el-button
                type="text"
                :disabled="scope.row.state === 1"
                @click="handleChange(scope.row.id)"
                >修改</el-button
              >
              <el-button
                type="text"
                :disabled="scope.row.state === 1"
                @click="removetag(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          class="fr"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryinfo.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="queryinfo.pagesize"
          layout="prev, pager, next, sizes,jumper"
          :total="counts"
          :background="true"
          hide-on-single-page
        >
        </el-pagination>
      </el-card>

      <!-- 添加编辑对话框  ref="editUser" -->
      <tag-dialog
        ref="editUser"
        :tagslist="tagslist"
        :formdata="TagForm"
        :titleText="titleText"
        @changetags="getTagsList"
      ></tag-dialog>
    </div>
  </div>
</template>

<script>
import { list, detail, remove, changeState } from '../../api/hmmm/tags'
import { status } from '@/api/hmmm/constants'
import TagDialog from './../components/tags-add.vue'

export default {
  name: 'TagIndex',
  components: {
    TagDialog
  },
  data() {
    return {
      queryinfo: {
        tagName: null,
        state: null,
        // 当前的页数
        page: 1,
        // 当前每页显示的条数
        pagesize: 10
      },
      TagForm: {
        tagName: '',
        state: '',
        subjectName: '', // 学科名称
        subjectID: '', // 学科 ID
        creator: '',
        addDate: '',
        totals: ''
      },
      // 数据总条数
      counts: 0,
      tagslist: [],
      titleText: ''
    }
  },
  created() {
    this.paramsId = this.$route.params.id
    this.getTagsList()
  },
  methods: {
    async getTagsList() {
      // this.paramsId = ''
      try {
        this.queryinfo.subjectID = this.paramsId || null
        const { data } = await list(this.queryinfo)
        // console.log(data)
        // this.TagForm = data
        this.tagslist = data.items
        this.counts = data.counts
      } catch (err) {
        console.log(err)
      }
    },
    // 监听 pagesize 每页显示几条数据改变的事件
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.queryinfo.pagesize = newSize
      this.getTagsList()
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      // console.log(newPage)
      this.queryinfo.page = newPage
      this.getTagsList()
    },
    // 重置搜索输入框数据 和 清除筛选条件
    clear() {
      this.queryinfo = {
        tagsName: null,
        state: null,
        page: 1,
        pagesize: 10
      }
      this.$refs.tagForm.resetFields()
    },
    // 根据状态和输入的标签名称搜索相应数据
    search() {
      this.queryinfo.page = 1
      this.getTagsList()
    },
    // 标签详情数据
    async handleEditForm(tagId) {
      this.TagForm.id = tagId
      try {
        const { data } = await detail({ id: tagId })
        // console.log(data)
        this.TagForm = data
      } catch (err) {
        console.log(err)
      }
    },
    // 添加、编辑之后表单清空
    query() {
      this.TagForm = {}
    },
    // // 新增或编辑标签
    handleChange(id) {
      this.query()
      this.$refs.editUser.dialogFormVisible = true
      if (id === 'add') {
        this.titleText = '新增目录'
      } else {
        this.titleText = '修改目录'
        this.handleEditForm(id)
      }
      // console.log(id)
    },
    // 删除标签
    async removetag(id) {
      this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await remove({ id })
            .then(response => {
              this.$message.success('删除成功')
              this.getTagsList()
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 状态改变
    async handleStatus(data) {
      // console.log(data)
      try {
        await changeState({
          id: data.id,
          state: data.state === 1 ? 0 : 1
        })
        this.$message.success('操作成功')
        data.state = data.state === 1 ? 0 : 1
      } catch (err) {
        console.log(err)
      }
    }
  },
  computed: {
    status() {
      return status
    },
    subject() {
      return this.$route.query || {}
    }
  }
}
</script>

<style scoped>
.el-card {
  margin: 15px 30px 0 10px;
}

.el-card >>> .el-card__header {
  padding: 0;
}

.el-input {
  width: 210px;
  height: 32px;
}

.back {
  margin-left: 80px;
  font-size: 16px;
}

.right {
  float: right;
}

.el-table {
  margin-top: 20px;
}

.el-pagination {
  margin: 20px 0 20px 0;
}

.el-alert >>> .el-alert__icon.is-big {
  font-size: 18px;
}

.el-breadcrumb {
  padding: 18px 20px;
}
</style>
